<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="../../resources/cola-ui/semantic.css">
	<link rel="stylesheet" type="text/css" href="../../resources/cola-ui/cola.css">
	<script src="../../resources/jquery-2.1.3.js"></script>
	<script src="../../resources/cola-ui/3rd.js"></script>
	<script src="../../resources/cola-ui/semantic.js"></script>
	<script src="../../resources/cola-ui/cola.js"></script>
	<script src="../../resources/cola-ui/i18n/zh/cola.js"></script>

	<style>
		#container {
			display: inline-block;
			width: 300px;
			height: 300px;
			border: 1px solid #000;
			padding: 12px;
		}
	</style>

	<script type="text/javascript">
		cola(function(model) {
			var container = document.getElementById("container");
			model.action({
				xCreate: function() {
					container.innerHTML = "";

					var dom = cola.xCreate({
						tagName: "div",
						content: "Hello World!"
					});
					container.appendChild(dom);
				},
				xRender: function() {
					container.innerHTML = "";

					var fragment = cola.xRender([
						{
							tagName: "input",
							readOnly: true,
							placeholder: "请尝试输入一些文字",
							"c-bind": "text"
						},
						{
							"c-bind": "text"
						}
					], model);
					container.appendChild(fragment);
				}
			});
		});
	</script>
</head>
<body style="padding:1em;">

	<div id="container">
	</div>

	<p>
		<button c-onclick="xCreate()">xCreate</button>
		<button c-onclick="xRender()">xRender</button>
	</p>
</body>
</html>